<template>
  <div>
    <el-card class="CARDTO">
      <div class="transferBox">
        <transFer :from-data="fromData" :to-data="toData" :parent-id="fromData.parentId" :title="title" />
      </div>
    </el-card>
  </div>
</template>

<script>
// 导入封装的穿梭框
import transFer from './components/transFer' // 引入
export default {
  name: 'GoodCategory',
  components: { transFer },
  data () {
    return {
      mode: 'transfer', // transfer addressList
      // 表单名称
      title: ['模块（菜单）访问权限', '拥有的操作权限'],
      fromData: [
        {
          id: '1',
          parentId: 0,
          label: '房源综合业务管理平台',
          children: [
            {
              id: '1-1',
              parentId: '1',
              label: '首页',
              children: []
            }, {
              id: '1-2',
              parentId: '1',
              label: '房源信息管理系统',
              children: [
                {
                  id: '1-2-1',
                  parentId: '1-2',
                  children: [],
                  label: '数据统计'
                }, {
                  id: '1-2-2',
                  parentId: '1-2',
                  children: [],
                  label: '房源信息管理'
                }, {
                  id: '1-2-3',
                  parentId: '1-2',
                  children: [],
                  label: '房源入库管理'
                }]
            }]
        }
      ],
      toData: [
      ]
    }
  },
  methods: {
    // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
    changeMode () {
      if (this.mode == 'transfer') {
        this.mode = 'addressList'
      } else {
        this.mode = 'transfer'
      }
    },
    // 监听穿梭框组件添加
    add (fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      console.log('fromData:', fromData)
      console.log('toData:', toData)
      console.log('obj:', obj)
    },
    // 监听穿梭框组件移除
    remove (fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      console.log('fromData:', fromData)
      console.log('toData:', toData)
      console.log('obj:', obj)
    }
  } // 注册
}
</script>

<style lang="scss" scoped>
.transferBox {
  margin: 0 auto;
  max-width: 800px;
}
</style>
